<meta name="csrf-token" content="{{ csrf_token() }}">
<style type="text/css">
    .permission dt, .permission dd, .permission dt input, .permission dt strong, .permission dt span {
        line-height: 2.917em;
    }
    .permission dt, .permission dd {
        border-width: thin;
        border-style: solid;
        border-color: #fff transparent #ddd transparent;
    }
    .permission dt, .permission dt input {
        vertical-align: middle;
    }
    .permission dt input {
        margin: 0 1em 0 0;
    }
    .permission dt strong:before {
        content: '[ ';
    }
    .permission dt strong:after {
        content: ' ]';
    }
    .permission dt strong {
        padding: 0 1em 0 0;
    }
    .permission dt .nodeName, .permission label {
        font-weight: normal;
    }

    .permission .proot {
        padding: 0 0 0 2em;
    }
    .permission .nodeInfo {
        display: inline-block;
        margin: 0;
        padding: 0 1em 0 0;
    }
    .permission .nodeInfo input {
        vertical-align: middle;
        margin: 0 1em 0 0;
    }
</style>
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog container add_portal" role="document">
        <div class="modal-content">
            <div class="modal-header">
                {{--<button type="button" class="close" data-dismiss="modal" aria-label="Close">--}}
                {{--<span aria-hidden="true">&times;</span>--}}
                {{--</button>--}}
                <h1 class="modal-title" id="gridSystemModalLabel">权限分配</h1>
            </div>
            <form action="" class="container input-wrapper">
                <dl class="permission">
                    @foreach($allMenus as $permission)
                        <dt><input type="checkbox" name="permissions[]" value="{{ $permission['id'] }}" @if(in_array($permission['id'],array_keys($menus))) checked @endif /><label for="" class="nodeName">{{ $permission['title'] }}</label></dt>
                        <dd class="clearfix proot">
                            @if (!empty($permission['sub']))
                            @foreach($permission['sub'] as $sub)
                                <p class="nodeInfo"><input type="checkbox" name="permissions[]" value="{{ $sub['id'] }}" @if(in_array($sub['id'],array_keys($menus))) checked @endif /><label for="">{{ $sub['title'] }}</label></p>
                            @endforeach
                            @endif
                        </dd>
                    @endforeach
                </dl>
                <p class="btn-group row onerow submit-wrapper">
                    <input type="button" class="submit" data-url="{{ route('roles.updatePermissions', ['id' => $id]) }}" value="提交" />
                    <input type="button" value="恢复" id="recovery" />
                    <input type="reset" value="清空" />
                    <input type="button" value="全选" id="selectAll" />
                </p>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="{{ asset('admin/frame/layui/layui.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery/jquery-2.1.0.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/global.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery.form.js') }}"></script>
<script type="text/javascript">

    //单选、多选
    $(document).on('click', '.permission input[type=checkbox]', function(){
        var $this = $(this);
        var $parent = $this.parent();

        var parentNodeName = $parent.get(0).tagName;
        if(parentNodeName == 'DT'){
            var DDNode = $parent.next('dd');
            if($this.is(':checked')){
                DDNode.find('input[type=checkbox]').prop('checked', true);
            }else{
                DDNode.find('input[type=checkbox]').prop('checked', false);
            }
        }

        if($parent.hasClass('nodeInfo')){
            var $DTNode = $parent.parent().prev();
            var $DDNode = $parent.parent();
            var $checkedLength = $DDNode.find('input[type=checkbox]:checked').length;
            if($this.is(':checked')){
                if(!$DTNode.children('input[type=checkbox]').is(':checked')){
                    $DTNode.children('input[type=checkbox]').prop('checked', true);
                }
            }else{
                if($checkedLength < 1){
                    $DTNode.find('input[type=checkbox]').prop('checked', false);
                }
            }
        }
    });

    //全选
    $(document).on('click', '#selectAll', function(){
        $('.permission').find('input[type=checkbox]').prop('checked', true);
    });

    //恢复
    var testArr = [1,12,15,2,21,23,25];

    $(document).on('click', '#recovery', function(){
        $.each(testArr, function(i, o){
            //console.log(i+':'+o);
            var $current = o;
            $('input[type=checkbox]').each(function(i, o){
                if($(o).val() == $current){
                    $(o).prop('checked', true);
                }
            });
        });
    });

    $('.submit').click('on', function () {
        var url = $(this).attr('data-url');
        commonAjaxSubmit(url,'POST');
    });
</script>